<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ant Design Vue Table with Row Span</title>
  <link rel="stylesheet" href="./assets/antd.css">
</head>
<body>

<div id="app">
<!--  <a-table :columns="columns" :data-source="dataSource" :custom-row="customRow"></a-table>-->
  <a-table></a-table>
</div>

<script src="./assets/antd.js"></script>
<script src="./assets/vue.js"></script>
<script>

  new Vue({
    el: '#app',
    data() {
      return {
        columns: [
          {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            customRender: ({ text, record }) => {
              const rowspan = record.branches.length; // 获取分支的数量
              if (rowspan > 0) {
                return {
                  children: text,
                  attrs: {
                    rowSpan: rowspan,
                  },
                };
              }
              return {
                children: text,
                attrs: {
                  rowSpan: 0,
                },
              };
            },
          },
          {
            title: 'Branch',
            dataIndex: 'branch',
            key: 'branch',
            // 这里设置自定义渲染函数，用于处理分支的渲染
            customRender: ({ text }) => {
              return {
                children: text,
              };
            },
          },
        ],
        dataSource: [
          {
            key: '1',
            name: 'John Brown',
            branches: ['Branch 1', 'Branch 2'], // 一行有多个分支
          },
          {
            key: '2',
            name: 'Jim Green',
            branches: ['Branch 3'],
          },
          {
            key: '3',
            name: 'Joe Black',
            branches: ['Branch 4', 'Branch 5', 'Branch 6'],
          },
        ],
      };
    },
    methods: {
      customRow(record, index) {
        // 根据分支数量，设置是否需要隐藏渲染的行
        if (record.branches.length > 0 && index % 2 !== 0) {
          return {
            style: {
              display: 'none',
            },
          };
        }
        return {};
      },
    },
  });
</script>

</body>
</html>
